<template>
  <page-header-one :scrollTop="scrollTop"></page-header-one>

  <div class="container flex-center">
    <div class="main flex-between">
      <div class="main-left">
        <p v-for="(item, index) in list" :key="item.id" class="font-14 pointer" :class="{ active: index == tabCheck }"
          @click="computedIndex(item.id)">{{
            item.tabName }}
        </p>
      </div>
      <div class="main-right">
        <p class="main-right-nav font-14">{{ `${list[tabCheck].typeName}/${list[tabCheck].tabName}/${list[tabCheck].name}`
        }}</p>
        <h2 class="main-right-name font-20">{{ list[tabCheck].name }}</h2>
        <p class="main-right-time font-12">{{ list[tabCheck].time }}</p>
        <div class="main-right-content">
          <div v-html="list[tabCheck].content"></div>
        </div>
        <div class="main-right-back flex flex-column flex-align-items-center">
          <p class="main-right-back-text font-16-B">返回使用手册首页</p>
          <p class="main-right-back-btn flex-center flex-align-items-center pointer" @click="goBack">
            <i class="iconfont icon-back"></i>
          </p>
        </div>
      </div>
    </div>
  </div>

  <page-footer-one></page-footer-one>
</template>

<script setup>
import PageHeaderOne from '@/components/pageHeaderOne.vue';
import PageFooterOne from '@/components/pageFooterOne.vue';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const scrollTop = ref(0);
const tabCheck = ref(0);
const list = ref([
  {
    id: 1,
    typeName: '基础问题',
    tabName: 'Fatohot介绍',
    name: '关于Fatohot',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 2,
    typeName: '基础问题',
    tabName: '账户注册',
    name: '加入Fatohot',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 3,
    typeName: '红人搜索',
    tabName: '主搜索',
    name: '主搜索区',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 4,
    typeName: '红人搜索',
    tabName: '顶部搜索',
    name: '顶部搜索区',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 5,
    typeName: '红人中心',
    tabName: 'AI红人检索',
    name: 'AI红人检索详解',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 6,
    typeName: '红人中心',
    tabName: '我的红人',
    name: '我的红人',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 7,
    typeName: '红人中心',
    tabName: '红人任务',
    name: '红人任务',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 8,
    typeName: '更新公告',
    tabName: '平台更新',
    name: 'Fatohot20220113更新:新首页详情页等',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 9,
    typeName: '更新公告',
    tabName: '平台更新',
    name: 'Fatohot20220113更新:新首页详情页等',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 10,
    typeName: '更新公告',
    tabName: '平台更新',
    name: 'Fatohot20220113更新:新首页详情页等',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  },
  {
    id: 11,
    typeName: '更新公告',
    tabName: '平台更新',
    name: 'Fatohot20220113更新:新首页详情页等',
    time: '2021-08-13',
    content: '<p> 海外红人智能营销云是一款覆盖海外红人检索、商业价值分析、营销自动化、竞品数据洞察、带货数据监控的saas产品，帮助您完整构建海外红人营销体系，抢占海外社媒营销流量高地，快速提升业绩增长，实现品销合一。</p>'
  }
]);

// 根据页面是否离开顶部，判断顶部栏样式
const pageChange = () => {
  scrollTop.value = document.documentElement.scrollTop || document.body.scrollTop;
}
const goBack = () => {
  history.go(-1);
}

// 根据ID判断index
const computedIndex = id => {
  for (let i = 0; i < list.value.length; i++) {
    if (list.value[i].id == id) {
      tabCheck.value = i;
      break;
    }
  }
}
onMounted(() => {
  pageChange();
  computedIndex(route.query.id);
  window.addEventListener("scroll", pageChange, false);
});
</script>

<style lang="less" scoped>
.container {
  padding: 92px 0 72px;
  background: #f7f8fb;
}

.main {
  width: 1200px;

  .main-left {
    width: 200px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;

    p {
      height: 48px;
      padding-left: 48px;
      line-height: 48px;
      margin-bottom: 4px;
      color: #303133;
      border-radius: 4px;

      &:hover {
        color: @main-color;
        background: rgba(255, 193, 206, .49);
      }

      &.active {
        background: @main-color !important;
        color: #fff !important;
      }
    }
  }

  .main-right {
    width: 976px;
    padding: 18px 24px 28px;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;

    .main-right-nav {
      color: #333;
      padding-bottom: 18px;
      border-bottom: 1px solid #eeeded;
    }

    .main-right-name {
      padding: 18px 0 8px;
      color: #333;
    }

    .main-right-time {
      color: #999;
      padding-bottom: 18px;
      border-bottom: 1px solid #eeeded;
    }

    .main-right-content {
      padding: 18px 0 32px;
      border-bottom: 1px solid #eeeded;
    }

    .main-right-back {
      padding-top: 24px;

      .main-right-back-text {
        color: #333;
        margin-bottom: 16px;
      }

      .main-right-back-btn {
        width: 48px;
        height: 48px;
        background: @main-color;
        border-radius: 50%;

        i {
          font-size: 24px;
          color: #fff;
        }
      }
    }
  }
}
</style>
